<template>
	<view class="tab-bar uni-flex">
		<view v-for="(item, index) in values" @click="_onClick(index)">
			<view class="uni-flex uni-column tab-bar-item">
				<text class="tab-bar-text">
					{{item}}
				</text>
				<image v-if="index === currentIndex" :src="tabIcon" class="tab-bar-icon"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import tabIcon from '@/static/image/tabBar/tab-icon.png';
	export default {
		name: 'TabBar',
		emits: ['clickItem'],
		props: {
			current: {
				type: Number,
				default: 0
			},
			values: {
				type: Array,
				default() {
					return []
				}
			}
		},
		data() {
			return {
				currentIndex: 0,
				tabIcon: tabIcon
			}
		},
		watch: {
			current(val) {
				if (val !== this.currentIndex) {
					this.currentIndex = val
				}
			}
		},
		created() {
			this.currentIndex = this.current
		},
		methods: {
			_onClick(index) {
				if (this.currentIndex !== index) {
					this.currentIndex = index
					this.$emit('clickItem', {
						currentIndex: index
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-bar {
		-webkit-justify-around: sapce-around;
		justify-content: space-around;
		.tab-bar-item {
			align-items: center;
			.tab-bar-text {
				font-size: 36rpx;
				line-height: 56rpx;
			}
			.tab-bar-icon {
				width: 40rpx;
				height: 6rpx;
			}
		}
	}
</style>
